<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-form :inline="true" :model="params" class="demo-form-inline">
          <el-form-item label="关键字" style="margin-left:30px">
            <el-input @keyup.enter.native="searchBtn" v-model="params.keyword" placeholder="根据编号搜索"></el-input>
          </el-form-item>
          <el-form-item style="float:right">
            <el-button @click="resetBtn">清除</el-button>
            <el-button type="primary" @click="searchBtn">查询</el-button>
          </el-form-item>
        </el-form>
        <!-- 总数提示 -->
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <i class="el-icon-info"></i>数据一共
              <span>{{total}}</span>条
            </div>
          </el-col>
        </el-row>
        <template>
          <el-table :data="randomsList" style="width: 100%">
            <el-table-column prop="id" label="编号" width="200"></el-table-column>
            <el-table-column prop="questionType" label="题型" width="100">
              <template #default="{row}">{{transQuestionType(row.questionType)}}</template>
            </el-table-column>
            <el-table-column label="题目编号" width="188px">
              <template #default="{ row }">
                <a
                  v-for="item in row.questionIDs"
                  :key="item.number"
                  style="color: rgb(0, 153, 255);display: block"
                  @click.prevent="goDetail(item)"
                >{{ item.number }}</a>
              </template>
            </el-table-column>
            <el-table-column prop="addTime" label="录入时间" width="200"></el-table-column>
            <el-table-column prop="totalSeconds" label="答题时间（s）" width="200"></el-table-column>
            <el-table-column prop="accuracyRate" label="正确率（%）" width="200"></el-table-column>
            <el-table-column prop="userName" label="录入人" width="200"></el-table-column>
            <el-table-column label="操作" width="140">
              <!-- 使用插槽，自定义该列的内容 -->
              <!-- 因为要获取组件内的数据，所以需要用到作用域插槽 -->
              <!-- row是 el-table封装出来的数据，固定写法 -->
              <!-- {{scope.row}} 能够获取表格中的每列数据-->
              <template v-slot="{ row }">
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  circle
                  @click="removeRandoms(row)"
                ></el-button>
                <!-- <el-button type="danger" size="mini" @click="removeRandoms(scope.row.id)">
                  <i class="el-icon-delete"></i>
                </el-button>-->
              </template>
            </el-table-column>
          </el-table>
        </template>
        <!-- 分页器 -->
        <el-pagination
          style="margin-top:20px;margin-bottom:20px;float:right;"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.page"
          :page-sizes="[20, 30, 50, 100]"
          :page-size="params.pagesize"
          layout=" prev, pager, next, sizes,jumper"
          :total="total"
        ></el-pagination>
      </el-card>
    </div>

    <!-- 预览弹窗 -->
    <!-- <questions-preview
      :data="questionInfos"
      :showDialog="visible"
      @close-dialog="closeDialog"
      @open-dialog="openDialog"
    />-->
    <el-dialog title="题目预览" :visible="showDialog" width="60%" @close="closeDialog">
      <!-- 默认插槽 -->
      <template #default>
        <el-row>
          <el-col :span="6">
            <span>【题型】：{{transQuestionType(detailList.questionType)}}</span>
          </el-col>
          <el-col :span="6">
            <span>【编号】：{{detailList.id}}</span>
          </el-col>
          <el-col :span="6">
            <span>【难度】：{{transDifficulty(detailList.difficulty)}}</span>
          </el-col>
          <el-col :span="6">
            <span>【标签】：{{detailList.tags}}</span>
          </el-col>
          <el-col :span="6">
            <span>【学科】：{{detailList.subjectName}}</span>
          </el-col>
          <el-col :span="6">
            <span>【目录】：{{detailList.directoryName}}</span>
          </el-col>
          <el-col :span="6">
            <span>【方向】：{{detailList.direction}}</span>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <div>
          <p>【题干】：</p>
          <p v-html="detailList.question" style="color:blue"></p>
          <!-- 动态组件 -->
          <component
            :is="showVue"
            :List="detailList.options"
            :radioChoose="radioChoose"
            :checkboxChoose="checkboxChoose"
          />
        </div>
        <el-divider></el-divider>
        <div>
          <span>
            【参考答案】：
            <el-button type="danger" @click="openVideo">视频预览</el-button>
            <div class="demo" v-if="flag">
              <video ref="myvideo" width="320" height="240" type="video/mp4" poster controls></video>
            </div>
          </span>
        </div>
        <el-divider></el-divider>
        <div>
          <span>【答案解析】：</span>
          <span v-html="detailList.answer"></span>
        </div>
        <el-divider></el-divider>
        <div>
          <span>【题目备注】：{{detailList.remarks}}</span>
        </div>
      </template>
      <!-- 具名插槽 -->
      <template #footer>
        <el-button @click="close">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from "@/api/hmmm/questions";
import questionsPreview from "../components/questions-preview.vue";
import Radio from "@/module-hmmm/components/qP/Radio.vue";
import Checkbox from "@/module-hmmm/components/qP/Checkbox.vue";

export default {
  components: {
    questionsPreview,
    Radio,
    Checkbox
  },
  data() {
    return {
      form: {
        keyword: ""
      },
      randomsList: [],
      params: {
        page: 1,
        pagesize: 20,
        keyword: ""
      },
      total: 0,
      questionInfos: {},
      showDialog: false,
      // 详情列表
      detailList: {},
      // 动态组件显示变量
      showVue: "",
      // 单选答案
      radioChoose: null,
      // 多选题的答案
      checkboxChoose: [],
      // 控制视频播放组件显隐
      flag: false
    };
  },
  mounted() {
    this.fetchRandomsList();
  },
  methods: {
    async fetchRandomsList() {
      const { data } = await randoms(this.params);
      // console.log(data)
      this.randomsList = data.items;
      this.total = data.counts;
      this.params.pagesize = 20;
    },
    transDifficulty(value){
      const TYPES = {
        1:'简单',
        2:'一般',
        3:'困难'
      }
      return TYPES[value]
    },
    transQuestionType(value) {
      const TYPE = {
        1: "单选",
        2: "多选",
        3: "简答"
      };
      return TYPE[value];
    },
    // transQuestion(value) {
    //   const TYPE = {
    //     1: "多选",
    //     2: "单选",
    //     3: "简答"
    //   };
    //   return TYPE[value];
    // },
    // 改变长度大小
    handleSizeChange(size) {
      // console.log(size)
      this.params.pagesize = size;
      // 当修改展示每页几条时 强制将当前页设置成第 1 页
      this.params.page = 1;
      this.fetchRandomsList();
    },
    // 改变页
    handleCurrentChange(page) {
      this.params.page = page;
      this.fetchRandomsList();
    },
    // 删除列表
    removeRandoms(data) {
      // 1.询问用户是否删除
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          // 点击确定
          // 2.请求接口
          await removeRandoms(data);
          this.$message.success("删除成功");
          // 刷新列表
          this.fetchRandomsList();
        })
        .catch(() => {});
    },
    searchBtn() {
      this.fetchRandomsList();
    },
    resetBtn() {
      this.params = {
        page: 1,
        pagesize: 20,
        keyword: ""
      };
      this.fetchRandomsList();
    },
    async goDetail({ id }) {
      this.showDialog = true;
      // 请求接口
      const res = await detail({ id: id });
      // console.log(res)
      this.detailList = res.data;
      // 根据类型判断显示哪一个组件（**********）
      if (this.detailList.questionType == "1") {
        // -------------------显示单选框
        this.showVue = Radio;
        // 获取单选答案
        const arr1 = this.detailList.options;
        // console.log(arr1);
        const index = arr1.findIndex(item => {
          return item.isRight === 1;
        });
        // console.log(index)
        // console.log(arr1[index].id);
        // 判断是否有选项
        if (index === -1) {
          this.radioChoose = null;
        } else {
          this.radioChoose = arr1[index].id;
        }
      } else if (this.detailList.questionType == "2") {
        // -----------------------显示多选框
        this.showVue = Checkbox;
        // 获取多选答案
        const arr = this.detailList.options;
        // console.log(arr);
        const filter2 = arr
          .filter(item => {
            return item.isRight === 1;
          })
          .map(item => {
            return item.id;
          });
        // console.log(filter2);
        // 判断是否有选项
        if (filter2.length === 0) {
          this.checkboxChoose = [];
        } else {
          this.checkboxChoose = filter2;
        }
      } else {
        this.showVue = "";
      }
    },
    closeDialog() {
      this.showDialog = false;
      // 还原详情列表
      this.detailList = {};
      // 还原单选答案
      this.radioChoose = null;
      // 还原多选答案
      this.checkboxChoose = [];
      // 关闭播放器
      this.flag = false;
    },
    // 关闭按钮
    close() {
      this.closeDialog();
    },
    // 视频播放
    openVideo() {
      // 第二次点击关闭视频组件
      if (this.flag) {
        this.flag = false;
      } else {
        // 显示视频播放器
        this.flag = true;
        // console.log(this.detailList.videoURL);
        const url = this.detailList.videoURL;
        // 等dom元素加载完后修改属性
        this.$nextTick(() => {
          // 测试视频播放
          // this.$refs.myvideo.setAttribute('src', videoCs)
          this.$refs.myvideo.setAttribute("src", url);
          // console.log(this.$refs.myvideo.src);
        });
      }
    }
  }
};
</script>

<style scoped>
.grid-content {
  padding: 10px;
  padding-left: 20px;
  margin-bottom: 20px;
  background-color: #f4f4f5;
  font-size: 14px;
  border-radius: 6px;
  color: #909399;
}
.grid-content i {
  margin-right: 10px;
}
.grid-content span {
  /* color: red; */
  margin: 0 5px;
}
</style>
